<template>
  <HModal @mousedown.native.stop @cancel="close" @ok="handleOK"
          :height="800" :width="800" :visible="visible" title="控件清空设置">
    <div class="field-clear-config-item" v-for="(item, index) in dataSource">
      <div class="field-clear-config-item-left">
        <RowAttribute :span="24" label="前置条件">
          <FormulaTextAreaConfig
            style="flex: 0.5" :formDefinition="formDefinition"
            :variableContainerConfig="variableContainerConfig"
            v-model="item.formula" :title="item.formulaTitle"
            @update:title="t => item.formulaTitle = t"/>
        </RowAttribute>
        <RowAttribute :span="24" label="清空字段">
          <ClearFieldInput v-model="item.clearFieldIds" :formDefinition="formDefinition" />
        </RowAttribute>
      </div>
      <div class="field-clear-config-item-right">
        <a-button type="primary" ghost icon="plus" size="small" @click="() => insert(index)"/>
        <a-button type="primary" @click="() => remove(item)"
                  ghost style="margin-left: 10px" icon="minus" size="small"/>
      </div>
    </div>
  </HModal>
</template>
<script>
import { createField, createFieldClearFormula, createFormDefinition } from '@comp/hhd/design/FormDesigner/types'
import { createProps } from '@/utils'
import RowAttribute from '@comp/hhd/layout/RowAttribute.vue'
import HModal from '@comp/hhd/HModal/HModal.vue'
import FormulaTextAreaConfig
  from '@comp/hhd/design/FormDesigner/field/comps/form/FieldValueFormulaGroups/configs/FormulaTextAreaConfig.vue'
import ClearFieldInput
  from '@comp/hhd/design/FormDesigner/field/comps/form/FieldValueFormulaGroups/configs/ClearFieldInput.vue'

export default {
  name: 'FieldClearConfigModal',
  components: {
    ClearFieldInput,
    FormulaTextAreaConfig,
    HModal,
    RowAttribute
  },
  props: {
    fieldConfig: createProps(Object, createField),
    formDefinition: createProps(Object, createFormDefinition)
  },
  data() {
    return {
      visible: false,
      dataSource: [],
    }
  },
  methods: {
    setData(dataSource) {
      this.dataSource = dataSource
      if (!this.dataSource || !this.dataSource.length) {
        this.addNew()
      }
      this.open()
    },
    insert(index) {
      let formula = createFieldClearFormula()
      formula.fieldId = this.fieldConfig.id
      this.dataSource.splice(index + 1, 0, formula)
    },
    remove(item) {
      this.dataSource = this.dataSource.filter(i => i !== item)
      if(!this.dataSource || this.dataSource.length <= 0) {
        this.addNew()
      }
    },
    addNew() {
      let formula = createFieldClearFormula()
      formula.fieldId = this.fieldConfig.id
      this.dataSource.push(formula)
    },
    open() {
      this.visible = true
    },
    close() {
      this.visible = false
    },
    handleOK() {
      let list = this.dataSource || [], flag = true
      if(list.length === 1 && !list[0].formula && !list[0].clearFieldIds) {
        this.doHandleOK([])
        return
      }
      list.forEach(item => {
        if(!item.formula || !item.clearFieldIds) {
          flag = false
        }
      })
      if (!flag) {
        this.$message.warn('前置条件和清空字段不能为空')
        return
      }
      this.doHandleOK(this.dataSource)
    },
    doHandleOK(formulas) {
      this.formDefinition.fieldClearFormulas = this.formDefinition.fieldClearFormulas.filter(f => f.fieldId !== this.fieldConfig.id)
      this.formDefinition.fieldClearFormulas.push(...formulas)
      this.close()
    }
  },
  computed: {
    variableContainerConfig() {
      let formIds = [(this.formDefinition.subForms || []).map(i => i.id), this.formDefinition.id].toString();
      return {
        containers: ['formVariable'],
        formDefinition: this.formDefinition,
        formIds
      };
    },
  }
}
</script>
<style>
.field-clear-config-item {
  padding: 10px;
  display: flex;
}

.field-clear-config-item-left {
  flex: 1;
  padding: 10px 10px 0 10px;
  border-radius: 4px;
  border: 1px solid #cccccc;
  margin-right: 20px;
}
</style>